<!--
 * @Date: 2024-11-04 16:30:35
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-11-08 11:30:54
 * @Description: 按钮配置属性弹窗
-->
<template>
  <vxe-modal :="dialogAttrs" v-model="dialogState.visible" @close="handleClose">
    <div class="btns-panel">
      <el-alert class="btns-panel-tips"
        title="信息提示" type="info" :closable="false">
        <p>1、字段属性【条件可见】默认值为true；</p>
        <p>2、如果存在自定义的方法内容，自定义的内容优先级大于默认值。</p>
      </el-alert>
      <div class="btns-panel-editor">
        <el-alert :title="`buttons.visibleFunc(${paramText}) {`" :="editorAlertAttrs"/>
        <AceCodeEditor
          mode="javascript"
          v-model="dialogState.eidtText"
        />
        <el-alert title="}" :="editorAlertAttrs"/>
      </div>
    </div>
    <template #footer>
      <el-button size="default" type="primary" @click="handleConfirm">确定</el-button>
      <el-button size="default" @click="handleClose">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { baseAttrs } from '@/components/dialogs/cfg/base-cofig.js'
import { ref, reactive } from 'vue';

import { AceCodeEditor } from '@/components/vf-editor'
import XEUtils from 'xe-utils';

const props = defineProps({
  paramText: { type: String, default: 'btnItem, queryParams' }
})

const dialogAttrs = reactive({
  ...baseAttrs,
  title: '按钮条件可见配置',
  width: '55%',
  height: '55%',
  position: { top: 200 },
  showZoom: false,
  showClose: true,
  fullscreen: false,
});
const dialogState = reactive({
  visible: false,
  tableRow: [],
  eidtText: '',
})

const handleOpen = (tableRow) => {
  dialogState.tableRow = tableRow
  dialogState.eidtText = XEUtils.clone(tableRow.visibleFunc, true)
  dialogState.visible = true
}
const handleClose = () => {
  dialogState.visible = false
}
const handleConfirm = () => {
  dialogState.tableRow.visibleFunc = dialogState.eidtText
  dialogState.visible = false
}

const editorAlertAttrs = reactive({
  type: 'info',
  style: { padding: 0 },
  closable: false,
});

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>
.btns-panel {
  display: flex;
  flex-direction: column;
  .btns-panel-tips {
    margin-bottom: 12px;
  }
  .btns-panel-editor {
    flex: 1;
    min-height: 100px;
  }
}
</style>